<template>
	<view class="container">
		<view class="tops">
			<view class="online-class">我的直播课</view>
		</view>
		<view class="experience-class">
			<view class="experience-view" v-if="liveList.length > 0">
				<view class="experience-list" v-for="item in liveList" @click="toliveplay(item)">
					<view class="exp-title">
						<view class="titles">{{item.ktmc}}</view>
					</view>
					<view class="desc">直播时间：{{convertTime( item.add_time )}}</view>
					<view class="teachers">
						<view class="class-btns">进入房间</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-else> 暂无数据 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseURL: getApp().globalData.baseUrl,
				liveList: [],
				appid: uni.getStorageSync('appid')
			}
		},
		onShow(){
			this.getLive();
		},
		methods: {
			convertTime(timestamp) {
			      return this.formatTime(timestamp)
			},
			formatTime(timestamp, format = 'yyyy-MM-dd hh:mm:ss') {
			  // 自动处理 10位 和 13位 时间戳
			  const ts = timestamp.toString().length === 10 ? timestamp * 1000 : timestamp
			  const date = new Date(ts)
			  
			  const config = {
			    yyyy: date.getFullYear(),
			    MM: (date.getMonth() + 1).toString().padStart(2, '0'),
			    dd: date.getDate().toString().padStart(2, '0'),
			    hh: date.getHours().toString().padStart(2, '0'),
			    mm: date.getMinutes().toString().padStart(2, '0'),
			    ss: date.getSeconds().toString().padStart(2, '0'),
			    M: date.getMonth() + 1,
			    d: date.getDate(),
			    h: date.getHours(),
			    m: date.getMinutes(),
			    s: date.getSeconds()
			  }
			
			  return format.replace(/(yyyy|MM|dd|hh|mm|ss|M|d|h|m|s)/g, match => config[match])
			},
			getLive(){
				uni.request({
					url: this.baseURL + '/api/user/liveList',
					method: 'GET',
					header: { 'Content-Type': 'application/json' },
					data: {appid:this.appid},
					success: (res) => {
						if( res.data.data.length > 0 ){
							this.liveList = res.data.data
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})
			},
			toliveplay(item){
				uni.navigateTo({url: '/pages/class/liveplay?appid='+this.appid+'&roomid='+item.roomid+'&title='+item.ktmc})
			}
		}
	}
</script>

<style>
	.container{background: #F8FAFB;height: 100%;}
	.tops{display: flex;width: 690rpx;margin: 0 auto;justify-content: space-between;flex-direction: row;padding: 10rpx 0 10rpx 0;}
	.tops .online-class{font-size: 42rpx;font-weight: bold;}
	.experience-class{width: 690rpx;margin: 10rpx auto;}
	.experience-title{width: 690rpx;font-size: 38rpx;font-weight: bold;letter-spacing: 5rpx;}
	.experience-view{width: 690rpx;display: flex;flex-direction: column;}
	.experience-list{width: 690rpx;background: #fff;border-radius: 10rpx;margin-top: 20rpx;padding: 30rpx;}
	.exp-title{display: flex;flex-direction: row;}
	.experience-list .free-icon{height: 50rpx;background: url(/static/free.png);background-size: 100% 100%;font-size: 30rpx;float: left;padding: 0 15rpx 0 15rpx;}
	.experience-list .free-icon text{display: inline-block;text-align: center;color: #fff;line-height: 50rpx;}
	.titles{padding-left: 10rpx;line-height: 50rpx;font-size: 35rpx;}
	.desc{color: #ADADAD;font-size: 32rpx;margin-top: 10rpx;}
	.teachers{width: 100%;display: flex;flex-direction: row;margin-top: 80rpx;align-items: center;justify-content: space-between;}
	.teacher-img{width: 50%;display: flex;flex-direction: row;justify-content: start;}
	.teachers image{width: 80rpx;height: 80rpx;border-radius: 80rpx;}
	.class-btns{font-size: 26rpx;color: #fff;width: 180rpx;height: 50rpx;text-align: center;background: #EB6E30;border-radius: 50rpx;line-height: 50rpx;}
	.class-infos{display: flex;flex-direction: column;width: 60%;text-align: right;}
	.nodata{width: 100%;text-align: center;color: #888;font-size: 26rpx;margin-top: 30rpx;}
</style>
